<script setup lang="ts">
// 1. 导入工具函数
import { reactive } from 'vue'

// 2. 定义响应式的对象
const cat = reactive({
  name: '悠米',
  age: 3,
  food: ['鱼', '猫粮'],
})

// 不支持普通类型
// let num=reactive(100)

// setTimeout(() => {
// 不要重新赋值:如果重新赋值普通数据 丢失响应性
//   cat = { name: '', age: 0, food: [] }
//   console.log('123')
// }, 2000)
</script>

<!-- 结构 -->
<template>
  <p @click="cat.name = '咪咪'">{{ cat.name }}</p>
  <p @click="cat.age++">{{ cat.age }}</p>
  <p @click="cat.food.push('猫条')">{{ cat.food }}</p>
</template>

<!-- 样式 -->
<style scoped></style>
